<template>
  <div class="user-profile">
    <van-nav-bar
      class="nav-tab-btn"
      title="个人信息"
      fixed
      left-arrow
      @click-left="$router.push({path: '/my'})"
    ></van-nav-bar>

    <input type="file" hidden ref="file" @change="onChange">
    <van-cell
      title="头像"
      :value="this.passWord"
      is-link 
      @click="$refs.file.click()"
    >
      <van-image fixed="contain" round :src="user.avatarUrl" />
    </van-cell>


    <!-- 昵称 -->
    <van-cell
      title="昵称"
      :value="user.userName"
      is-link
      @click="isPopNameShow = true"
    ></van-cell>
    <!-- /昵称 -->

    <!-- 密码 -->
    <van-cell
      title="密码"
      :value="this.passWord"
      is-link
      @click="isPopPassWordShow = true"
    ></van-cell>

    <van-popup
      v-if="isPopNameShow"
      v-model.trim="isPopNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <changeName
        :name="user.userName"
        @close="isPopNameShow = false"
        @upload-name="changeUser"
      ></changeName>
    </van-popup>

    <!-- 修改密码 -->
    <van-popup
      v-if="isPopPassWordShow"
      v-model.trim="isPopPassWordShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <changePassWord
        :passWord="this.passWord"
        @close="isPopPassWordShow = false"
        @upload-name="changePassWord"
      ></changePassWord>
    </van-popup>

    <!-- 修改头像 -->
    <van-popup
      v-if="isPopPhotoShow"
      v-model.trim="isPopPhotoShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <changePhoto
        :img="this.img"
        @close="isPopPhotoShow = false"
        @upload-photo="changePhoto"
      ></changePhoto>
    </van-popup>
  </div>
</template>
<script>
import changeName from './component/changeName.vue'
import changePassWord from './component/changePassWord.vue'
import changePhoto from './component/changePhoto.vue'
export default {
    components: {
        changeName,
        changePassWord,
        changePhoto
    },
    created() {
      this.user = this.$store.state.userInfo
    },
    data() {
        return {
            user: null, // 用户的信息
            isPopNameShow: false,
            isPopPassWordShow: false,
            isPopBirthShow: false,
            isPopPhotoShow: false, // 头像弹框显示
            img: null, // 头像信息
            passWord: '******' // 空的密码
        }
    },
    methods: {
        changeUser(userInfo) {
            this.$store.commit('setUserInfo', userInfo)
            this.user = userInfo
        },
        changePassWord(userInfo) {
            this.$store.commit('setUserInfo', userInfo)
            this.user = userInfo
        },
        onChange() {
          this.isPopPhotoShow = true
          const img = this.$refs.file.files[0]
          // console.log(img); // File 对象
          this.img = window.URL.createObjectURL(img)
          // console.log(this.img); // blob:http://localhost:8080/c49d28e7-77a0-468e-8c3b-f7fad3535345
        },
        // 修改头像
        changePhoto (res) {
          // 用户的信息先进行更新 
          this.user = res.data
          // 这里的数据更新是异步的
          this.$store.commit('setUserInfo', res.data)
        }
    }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #07c160;
  margin-bottom: 10px;
  ::v-deep .van-nav-bar__title  {
    color: white;
    font-weight: 700;
  }
}
.user-profile {
  padding-top: 92px;
  text-align: left;
  /deep/.van-nav-bar {
    .van-icon {
      color: white;
    }
  }

  /deep/.van-cell {
    .van-image__img {
      width: 25px;
      height: 25px;
    }
  }
}
</style>